<template>
  <el-dialog
    title="节气能耗流水详情"
    :visible.sync="visible"
    width="1000px"
    append-to-body
    :before-close="handleClose"
  >
    <div>
      <lb-table
        :column="tableData.column"
        :data="tableData.data"
        pagination
        height="500"
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="[20, 40, 60, 80]"
        :pager-count="5"
        :current-page.sync="currentPage"
        :total="total"
        :page-size="pageSize"
        @size-change="handleSizeChange"
        @p-current-change="handleCurrentChange"
      >
      </lb-table>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submit" size="small">确 定</el-button>
      <el-button @click="handleClose" size="small">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getSolartermsDetails } from "@/api/exports/solarTerms.js";
export default {
  components: {},
  props: {
    visible: { type: Boolean, default: false },
    detailData: { type: Object, default: {} },
  },
  data() {
    return {
      form: {},
      tableData: {
        column: [
          {
            prop: "deptName",
            label: "用能单位",
            align: "center",
            showOverflowTooltip: true,
          },
          // {
          //   prop: "highTemperature",
          //   label: "最高气温(℃)",
          //   align: "center",
          //   showOverflowTooltip: true,
          // },
          // {
          //   prop: "lowTemperature",
          //   label: "最低气温(℃)",
          //   align: "center",
          //   showOverflowTooltip: true,
          // },
          {
            prop: "kgce",
            label: "能耗(kgce)",
            align: "center",
            showOverflowTooltip: true,
          },
          {
            prop: "",
            label: "同比",
            align: "center",
            showOverflowTooltip: true,
            render: (h, scope) => {
              let a = scope?.row?.kgce ?? 0;
              let b = scope?.row?.lastYearKgce ?? 0;
              let c;
              if (b == 0) {
                c = 0;
              } else {
                c = (a - b) / b;
                c = c.toFixed(2);
              }
              return <div>{c}</div>;
            },
          },
          {
            prop: "",
            label: "额度超支(kgce/㎡)",
            align: "center",
            showOverflowTooltip: true,
            render: (h, scope) => {
              let a = scope?.row?.kgce ?? 0;
              let b = scope?.row?.lastYearKgce ?? 0;
              let c;
              c = a - b;
              c = c.toFixed(2);
              return <div>{c}</div>;
            },
          },
          {
            prop: "budgetOver",
            label: "预算超支(元)",
            align: "center",
            showOverflowTooltip: true,
          },
        ],
        data: [],
      },
      currentPage: 1,
      pageSize: 20,
      total: 0,
    };
  },
  watch: {
    visible: {
      handler(value) {
        if (value) {
          this.initData(this.detailData);
        }
      },
      deep: true,
      immediate: false,
    },
  },
  created() {},
  methods: {
    // 请求详情
    initData(value) {
      this.tableData.data = [];
      let query = { ...value };
      getSolartermsDetails(query)
        .then((res) => {
          if (res.code === 700) {
            this.$message.warning(res.msg);
            return false;
          }
          console.log(res, "list2");
          this.tableData.data = res?.rows ?? [];
          this.total = res?.total ?? 0;
        })
        .catch((err) => {
          // this.$message.error("系统错误,请联系管理员!200102");
        });
    },
    handleSizeChange(val) {
      this.currentPage = 1;
      this.pageSize = val;
      this.initData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.initData();
    },
    submit() {
      this.handleClose();
    },
    handleClose() {
      this.resetForm("form");
      this.$emit("update:visible");
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
